<template>
  <div class="login">
    <el-card>
      <el-form ref="ruleForm" :model="loginParams" :rules="loginParamsRules">
        <div class="title">
          <div class="logo">
            <img src="@/assets/images/logo.png" height="42" />
          </div>
          <div class="name">大连百炼数字化制造系统</div>
        </div>
        <el-form-item prop="username">
          <el-input id="iptA0UserName" v-model="loginParams.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input id="iptA0Password" v-model="loginParams.password" type="password" show-password prefix-icon="el-icon-lock" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="text" class="btn_forgetPwd" @click="forgetPassword">忘记密码？</el-button>
        </el-form-item>
        <el-form-item>
          <el-button id="btnA0Login" type="primary" class="btn_login" @click="login">登录</el-button>
        </el-form-item>
        <div class="tech-support">技术支持：大连海事大学百炼数字化项目组</div>
      </el-form>
    </el-card>
  </div>
</template>

<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { Message, Notification } from 'element-ui'
import { loginApi, getUserAuthoritys } from '@/api/login/api-login'
import md5 from 'js-md5'

const vuexLogin = namespace('Login')

@Component({
  components: {}
})
export default class LoginIndex extends Vue {
  @vuexLogin.Mutation SET_LOGIN_USER
  // 登录输入参数
  loginParams: any = {
    username: '',
    password: ''
  }

  // 登录输入参数规则校验
  loginParamsRules: any = {
    username: [{ required: true, message: '请输入账号名', trigger: 'change' }],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 12, message: '请输入6-12个数字和英文字母的组合', trigger: 'change' },
      { pattern: /^[A-Za-z0-9]+$/, message: '请输入6-12个数字和英文字母的组合', trigger: 'change' }
    ]
  }

  // 忘记密码
  forgetPassword() {
    this.$message.info('请联系系统管理员处理')
  }

  // 登录
  login() {
    let param = {
      jobNumber: this.loginParams.username,
      password: md5(this.loginParams.password),
      device: true // 电脑
    }
    this.loginReq(param)
  }
  async loginReq(params) {
    await loginApi(params)
      .then((res: any) => {
        // 登录成功 保存用户信息 跳转进系统主页
        console.log(res)
        this.SET_LOGIN_USER(res.data)
        Message.success('登录成功')
        this.$router.push({ name: 'menuIndex' })
      })
      .catch(err => Notification.error(err))
  }
}
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 560px;
    border-radius: 20px;
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
  }
  .el-card__body {
    padding: 20px 40px;
  }
  .title {
    height: 80px;
    line-height: 80px;
    .logo {
      height: 80px;
      line-height: 80px;
      padding-left: 30px;
      margin-top: 19px;
      float: left;
    }
    .name {
      float: left;
      margin-left: 1em;
      font-size: 20px;
      font-weight: 600;
    }
  }
}
.btn_login {
  width: 100%;
  background-color: #e60013;
  border-color: #e60013;
}
.btn_forgetPwd {
  float: right;
  color: #999;
}
.tech-support {
  text-align: center;
  font-size: 12px;
  color: #999;
}
</style>
